{extend name="public/menu2" /}
{block name='title'}-{$cur.name}{/block}

{block name='content'}
<div id="search">
    <span class="left">课程关键字：</span>
    <input id="keyword" type="text" placeholder="请输入课程关键字" value="{$Think.get.keywords}">
    <span class="btn">搜索</span>
</div>
<ul id="nav">
    {foreach $lesson_cate as $k=>$v}
    <li {if $ppid==$v.id} class="active" {/if}> <a href="{:request()->baseUrl()}?pid={$v.id}">{$v.name}</a></li>
    {/foreach}
</ul>
<!-- 分类 -->
<div id="classification">
    {notempty name='lesson_filter'}
    <div class="choice">
        <span class="left">已选分类：</span>
        <ul>
            {foreach $select as $s}
            <li data-value="{$s.id}">
                <span>{$s.pname}</span>
                <span>{$s.name}</span>
                <span class="img"><img src="__STATIC__/index/img/close.png" alt=""></span>
            </li>
            {/foreach}
        </ul>
        <span id="close_all">全部清除</span>
    </div>
    <div class="ajaxcate">
        {foreach $lesson_filter as $v}
        {if strpos($v['name'],'城市')===false}
    <div class="sort">
        <span class="left">{$v.name}：</span>
        <div class="right">
            {notempty name='v.children'}
            {foreach $v.children as $vv}
            <span data-value="{$vv.id}" {if in_array($vv.id,explode(',',$Think.get.pid))} class="on" {/if}>{$vv.name}</span>
            {/foreach}
            {/notempty}
        </div>
    </div>
        {else}
        <div class="sort">
            <span class="left">{$v.name}：</span>
            <input id="select" type="text" name="" readonly="" placeholder="请选择" value="" data-value=""/>
            <div id="city" style="z-index: 999">
                <ul class="city">
                    {notempty name='v.children'}
                    {foreach $v.children as $vv}
                    <li data-value="{$vv.id}">{$vv.name}</li>
                    {/foreach}
                    {/notempty}
                </ul>
            </div>
        </div>
        {/if}
        {/foreach}
    </div>
    {/notempty}

    <!--<div class="sort">-->
    <!--<span class="left">课程关键字：</span>-->
    <!--<input id="keyword" type="text" value="{$Think.get.keywords}" placeholder="请输入课程关键字">-->
    <!--<span class="btn">搜索</span>-->
    <!--</div>-->
</div>
<!--  -->
<div id="list">
    <!-- start -->
    {foreach $lesson as $v}
    <li>
        {php}$vid = $v['id'];{/php}
        <a class="image" href='{:url("/lesson/$vid")}'><img src="{$v.cover ?: ''}" alt=""></a>
        <div class="content">
            <a class="title a_row" href='{:url("/lesson/$vid")}'>{$v.title ?: ''}</a>
            {notempty name='v.cover_desc'}
            {foreach :json_decode($v['cover_desc'],true) as $vv}
            <p class="a_row">{$vv ?: ''}</p>
            {/foreach}
            {/notempty}
            <a class="btn" href='{:url("/lesson/$vid")}'>查看详情</a>
        </div>
    </li>
    {/foreach}
    <!-- end -->
</div>
<div id="total">
    <div id="page" class="fr"></div>
    <p>共找到 {$lesson_total} 个课程，共 {:ceil($lesson_total/5)} 页</p>
</div>
{/block}

{block name='script'}
<style>
    #search{
        margin: -40px auto 0;
        width: 800px;
        height: 30px;
        font-size: 14px;
    }
    #search .left{
        font-weight: bold;
    }
    #search input{
        margin: 0 10px;
        padding: 0 10px;
        width: 240px;
        height: 28px;
        line-height: 28px;
        border: 1px solid #959595;
        border-radius: 4px;
        outline: none;
    }
    #search .btn {
        display: inline-block;
        padding: 0 20px;
        height: 30px;
        line-height: 30px;
        background-color: #8f000b;
        border-radius: 15px;
        color: #fff;
        cursor: pointer;
    }
    #nav {
        margin: 30px auto 0;
        width: 1200px;
        border: 1px solid #8f000b;
        border-bottom: 2px solid #8f000b;
        border-radius: 4px 4px 0 0;
        display: flex;
    }

    #nav li {
        flex: 1;
        height: 40px;
        line-height: 40px;
        border-right: 1px solid #8f000b;
        text-align: center;
        font-size: 14px;
    }
    #nav li a{
        display: block;
        width: 100%;
        height: 100%;
    }
    #nav li:not(.active) {
        cursor: pointer;
    }

    #nav li.active {
        background-color: #8f000b;
        color: #fff;
    }
    #nav .active a{
        color:#fff;
    }
    #nav li:last-of-type {
        border: none;
    }

    #classification {
        box-sizing: border-box;
        margin: auto;
        padding: 20px;
        width: 1200px;
        min-height: 20px;
        box-shadow: 0 4px 8px #ddd;
        font-size: 14px;
    }

    #classification .choice {
        display: flex;
        margin-bottom: 15px;
        height: 26px;
        line-height: 26px;
    }

    #classification .choice ul {
        flex: 1;
        overflow: hidden;
        display: flex;
    }

    #classification .choice li {
        box-sizing: border-box;
        margin-right: 15px;
        border: 1px solid #8f000b;
        border-radius: 4px;
        overflow: hidden;
        display: flex;
    }

    #classification .choice li span:first-of-type {
        padding: 0 6px;
        background-color: #8f000b;
        color: #fff;
    }

    #classification .choice li span:nth-of-type(2) {
        padding: 0 6px;
    }

    #classification .choice .img {
        width: 26px;
        height: 26px;
        border-left: 1px solid #fff;
        cursor: pointer;
    }

    #classification .choice .img:hover {
        border-color: #8f000b;
    }

    #close_all {
        color: #8f000b;
        cursor: pointer;
    }
    #classification .sort {
        display: flex;
        margin-top: 10px;
        height: 30px;
        line-height: 30px;
        position: relative;
    }
    #classification .left {
        min-width: 84px;
        font-weight: bold;
    }

    #classification .right span {
        display: inline-block;
        margin-right: 20px;
        cursor: pointer;
    }
    #classification .right span.on{
        /*display: none;*/
        color: #8f000b;
    }
    #classification .right span:hover {
        color: #8f000b;
    }
    #classification #select{
        margin-right: 40px;
        padding: 0 10px;
        width: 60px;
        outline: none;
        text-align: center;
        padding: 0;
        margin-left: 0;
    }
    #classification #select:hover{
        cursor: pointer;
    }
    #classification input{
        margin: 0 10px;
        padding: 0 10px;
        width: 240px;
        border: 1px solid #959595;
        border-radius: 4px;
        outline: none;
    }
    #classification .btn{
        display: inline-block;
        padding: 0 20px;
        background-color: #8f000b;
        border-radius: 15px;
        color: #fff;
        cursor: pointer;
    }
    /* 科成列表 */
    #list {
        margin: 30px auto;
        width: 1200px;
    }

    #list li {
        margin-bottom: 30px;
        box-shadow: 0 4px 8px #ddd;
        display: flex;
    }

    #list li:hover {
        box-shadow: 0 10px 20px #ddd;
    }

    #list li .image {
        width: 270px;
        height: 270px;
    }

    #list li .content {
        padding: 0 30px;
        flex: 1;
    }

    #list .content .title {
        margin-bottom: 20px;
        font-size: 30px;
        line-height: 1.5;
        color: #000;
    }

    #list .content p {
        line-height: 2;
        font-size: 14px;
        color: #959595;
    }

    #list li .btn {
        display: block;
        margin-top: 20px;
        width: 100px;
        height: 40px;
        line-height: 40px;
        background-color: #8f000b;
        border-radius: 3px;
        text-align: center;
        color: #fff;
    }
    #total{
        margin: 0 auto 65px;
        max-width: 1200px;
        line-height: 40px;
        overflow: hidden;
    }
    #total p{
        padding-right: 10px;
        text-align: right;
        font-size: 14px;
        overflow: hidden;
    }
    #classification #city{
        display: none;
    }
    #classification .city{
        flex-wrap: wrap;
        display: flex;
        background: #fff;
        position: absolute;
        top: 30px;
        left: 86px;
        padding: 10px 0 10px 20px;
        max-width: 800px;
        box-shadow: 0 0 10px 0 rgba(0,0,0,.5);
    }
    #classification .city li{
        margin-right: 10px;
    }
    #classification .city li:hover{
        cursor: pointer;
        color:#8f000b;
    }
</style>
<script src="__STATIC__/index/js/jquery.page.js"></script>
<script src="__STATIC__/plugs/layui/layui.all.js"></script>

<script>
    $(function () {
//获取url参数
        function getQueryValue(key) {
            var match = location.search.match(new RegExp(key + '=([^&]*)'));
            return match && match[1] || '';
        }
        // 当前页码
        var page = getQueryValue("page") || 1;
        page = parseInt(page);
        // 总页数
        var pageCount = {:ceil($lesson_total/5)};
        if (pageCount == 1) {
            $("#page").hide();
        }
        $("#page").createPage({
            current: page,
            pageCount: pageCount,
            backFn: function (p) {
                //p是当前页码
                var pid = getQueryValue('pid');
                var keywords = getQueryValue('keywords');
                if(pid=='' && keywords==''){
                    window.location.href = "?page=" + p;
                }else {
                    window.location.href += "&page=" + p;
                }
            }
        });

        // 删除选中的分类
        $(".choice ul").on("click", ".img", function () {
            var id =  $(this).parents("li").data('value');
            var pid = getQueryValue('pid');
            var arr = pid.split(',');
            var index = arr.indexOf(''+id);
            if (index > -1) {
                arr.splice(index, 1);
            }
            arr.splice(arr.indexOf('{$ppid}'),1)
            pid = arr.join(',');
            changepid(pid);
        })
        // 选择分类
        $(".ajaxcate").on("click", ".sort .right span", function () {
            $(this).addClass("on").siblings().removeClass("on");
            var arr = $(".sort .right .on");
            var pid = '';
            arr.each(function () {
                if(pid==''){
                    pid+=$(this).data('value')
                }else {
                    pid +=','+$(this).data('value')
                }
            })
            var city = $('#select').data('value')
            if(city!='' && city!=undefined){
                pid+=','+city
            }
            changepid(pid);
        })

        // 搜索
        $("#search .btn").on("click", function () {
            var keyword = $("#keyword").val();
            if (!keyword || keyword == "") {
                console.log("请输入课程关键字");
                return false
            }else {
                location.href = '?keywords='+keyword
            }
        });
        //选择城市
        $('.ajaxcate').on('mouseenter','#select',function(){
            $('#city').show()
        })
        $('.ajaxcate').on('mouseleave','#select',function(){
            $('#city').hide()
        })
        $('.ajaxcate').on('mouseenter','#city',function(){
            $('#city').show()
        })
        $('.ajaxcate').on('mouseleave','#city',function(){
            $('#city').hide()
        })
        //选中城市
        $('.ajaxcate').on('click','#city ul li',function(){
            $('#city').hide()
            $('#select').val($(this).text()).data('value',$(this).data('value'))
            var arr = $(".sort .right .on");
            var pid = '';
            arr.each(function () {
                if(pid==''){
                    pid+=$(this).data('value')
                }else {
                    pid +=','+$(this).data('value')
                }
            })
            var city = $('#select').data('value')
            if (pid!=''){
                pid+=','+city
            }else {
                pid = city
            }
            changepid(pid);
        })
        //全部清除
        $('#close_all').on('click',function(){
            location.href = '?pid='+{$ppid}
        })

        function changepid(id) {
            var keywords = getQueryValue('keywords');
            // var page = getQueryValue('page');
            var url = '';
            if(id!=''){
                url = '?pid='+{$ppid}+','+id
            }else {
                url = '?pid='+{$ppid}
            }

            if(keywords!=''){
                url+= '&keywords='+keywords
            }
            // if(page!=''){
            //     url+= '&page='+page
            // }
            location.href = url
        }


    })
</script>

{/block}